src/components/ActivityFeed.tsx (1)

77-141: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Prevent stale/overlapping fetches from overwriting newer state.

Line 77-141 can commit outdated responses when requests overlap (interval tick, slow network, or username change), which can show the wrong feed/error state.

Suggested fix (ignore stale responses + cleanup-safe updates)

 useEffect(() => {
+  let isActive = true;
+  let latestRequestId = 0;
+
   const fetchEvents = async () => {
+    const requestId = ++latestRequestId;
     try {
       setLoading(true);
       setError(null);

       const res = await fetch(
         `https://api.github.com/users/${username}/events`
       );

@@
-      setEvents(data);
+      if (!isActive || requestId !== latestRequestId) return;
+      setEvents(data);
     } catch (err) {
+      if (!isActive || requestId !== latestRequestId) return;
       const fetchError: FetchError = {
         message: "Failed to fetch activity. Please try again.",
         isRateLimited: false,
       };
@@
       setError(fetchError);
       console.error("ActivityFeed fetch error:", fetchError);
       setEvents([]);
     } finally {
-      setLoading(false);
+      if (isActive && requestId === latestRequestId) {
+        setLoading(false);
+      }
     }
   };

   fetchEvents();

   const interval = setInterval(fetchEvents, 30000);
-  return () => clearInterval(interval);
+  return () => {
+    isActive = false;
+    clearInterval(interval);
+  };
 }, [username]);

Also applies to: 146-148

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ActivityFeed.tsx` around lines 77 - 141, The fetchEvents
useEffect can let slower responses overwrite newer state; fix it by making
fetchEvents cancellation-safe: create an AbortController (or increment a local
requestId/flag) inside the useEffect, pass its signal to fetch, and in the
finally/then blocks only call setEvents, setError, and setLoading if the request
wasn't aborted and the requestId matches the latest; also abort the controller
(or flip the flag) in the effect cleanup so overlapping interval ticks or
username changes can't commit stale responses; this touches useEffect,
fetchEvents, ActivityFeedError handling, and the setEvents/setError/setLoading
calls.